<template>
	<view class="content">
		<!-- 头部 -->
		<!-- #ifndef H5 -->
			<header-navbar class="headerNavbar"></header-navbar>
		<!-- #endif -->
		<view class="safeArea" :style="{top:navHeaderHeight+'px'}">
			<!-- 地图navbar -->
			<view class="OrderMap">
				<!-- 距离最近的商户地址 -->
				<view class="storyAddressBox">
					<view class="storyTitle">{{address}}</view>
					<view class="storyDistance">
						距您{{showDistance}}
						<image src="../../static/images/icon/menu/MenuAddressicon.png"></image>
					</view>
				</view>
				<!-- 配送方式 -->
				<view class="shippingBox">
					<router-link to="{name: map}">
						<view class="takeBySelf">自提</view>
					</router-link>
					<router-link to="{name: map}">
						<view class="outSend">外送</view>
					</router-link>
				</view>
			</view>
			<!-- 限时活动 -->
			<view class="saleForFree">
				节日好礼:端午期间即刻下单,立享第二杯半价优惠!
			</view>
			<!-- 新会员 -->
			<navigator hover-class="none">
				<view class="newComers">
					<text class="newComersTitle">新用户加入会员,立享专属特权</text>
					<text class="newComersNowJoin">立即加入&gt;</text>
				</view>
			</navigator>
			<!-- 产品轮播 -->
			<view class="menuSwiper">
				<swiper class="menuSwiperBox" indicator-dots="true" autoplay="true" interval="5000" duration="500" circular="true">
					<block>
						<swiper-item>
							<image src="../../static/images/swiper1.jpg" class="silde-images"></image>
						</swiper-item>
						<swiper-item>
							<image src="../../static/images/swiper2.jpg" class="silde-images"></image>
						</swiper-item>
					</block>
				</swiper>
			</view>
			<!-- 菜单 -->
			<view class="MenuBox">
				<view class="MenuBoxSafeArea">
					<!-- 左手风琴 -->
					<view class="MenuSelecter">
						<!-- 隐藏滚动条(overflow的父盒子) -->
						<view class="scrollHidden">
							<!-- 手风琴导航栏的样式 -->
							<scroll-view scroll-y="true" class="scrollBox">
								<!-- {{selected==1 ? 'active':''}} -->
								<!-- bindtap="showGoodsList" data-id="1" -->
								<view class="scrollItem" :class="selected==1 ? 'active':''" @tap="goToView(1)">人气TOP</view>
								<view class="scrollItem" :class="selected==2 ? 'active':''" @tap="goToView(2)">小吃系列</view>
								<view class="scrollItem" :class="selected==3 ? 'active':''" @tap="goToView(3)">经典系列</view>
								<view class="scrollItem" :class="selected==4 ? 'active':''" @tap="goToView(4)">鲜榨果汁</view>
								<view class="scrollItem" :class="selected==5 ? 'active':''" @tap="goToView(5)">美味冰茶</view>
								<view class="scrollItem" :class="selected==6 ? 'active':''" @tap="goToView(6)">奶昔系列</view>
								<view class="scrollItem" :class="selected==7 ? 'active':''" @tap="goToView(7)">汽水系列</view>
							</scroll-view>
						</view>
						<!-- 菜单列表 -->
						<!--  -->
					</view>
					<!-- 右边菜单 -->
					<view class="menuList">
						<navigator hover-class="none">
							<view class="orderShare">
								<text class="orderShareTitle">遇见美好,分享美好</text>
								<text class="orderShareFriends">好友拼单</text>
							</view>
						</navigator>
						<!-- scroll-into-view="{{toView}}" -->
						<scroll-view class="menuListScroll" scroll-y="true" :scroll-into-view="toView">
							<!-- 预留 -->
							<view>
								<!-- menuListBox -->
								<view class='menuListBox'>
									<!-- 
									一层循环:把商品遍历出来,贴上结构
									goodList{[
										0: {name:"...",goods:"..."}
										1: {name:"...",goods:"..."}
									]}
									 -->
									<block v-for="(list,i) in goodsList" :key="i">
										<view class='menuListBoxtitle' :id="'index'+i">{{list.name}}</view>
										<view class='productList'>
											<block v-for="(item,index) in list.goods" :key="index">
												<!-- 绑定每一项的ID,用于传递给其他交互 -->
												<!-- :id="item.id" -->
												<navigator hover-class="none" @click="catchId(item.id)">
													<view class='productItem' @click="showModal=true">
														<image :src='item.goodsImg' lazy-load="true"></image>
														<view class="productAttr">
															<view class='productName'>{{item.goodsName}}</view>
															<view class="productAbstract">{{item.goodsContent}}</view>
															<view class="productBuy">
																<view class="productPrice">￥{{item.price}}</view>
																<view class="productSize">选规格</view>
															</view>
														</view>
													</view>
												</navigator>
											</block>
										</view>
									</block>
								</view>
								<!-- 预留 -->
							</view>
							<!-- menuListBox -->
						</scroll-view>
					</view>
				</view>
			</view>

		</view>
		<!-- btnType="1" 1:加入购物车 count:1 默认初始商品数量1 -->
		<modal sureText="加入购物车" :count="1" :price="price" :temp="temp" :sugar="sugar" :showSize="showSize" :showModal="showModal"
		 @submit="goToCart" @cancel="showModal=false">
			<template v-slot:body>
				<view class="modalProductBox">
					<block v-for="(item,index) in selectedGood[0]" :key="index">
						<view class="modalProductImg">
							<image :src="item.goodsImg" mode="heightFix"></image>
						</view>
						<view class="modalScrollBox">
							<view class="modalScrollHidden">
								<scroll-view scroll-y="true" class="modalScroll">
									<!-- 标题 -->
									<text class="modalProductTitle">{{item.goodsName}}</text>
									<view class="modalProductContent">{{item.goodsContent}}</view>
									<!-- 规格/温度/糖度 -->
									<view class="modalProductParamList">
										<view class="modalProductParamTitle">规格</view>
										<view class="modalProductParamItemBox">
											<view class="modalProductParamItem" :class="selectedSize==1 ? 'active':''" @click="selectSize(1,item.midPrice)">{{item.midSize}}</view>
											<view class="modalProductParamItem" :class="selectedSize==2 ? 'active':''" @click="selectSize(2,item.maxPrice)">{{item.maxSize}}</view>
										</view>
									</view>
									<view class="modalProductParamList">
										<view class="modalProductParamTitle">温度</view>
										<view class="modalProductParamItemBox">
											<block v-if="item.goodType=='1'">
												<view class="modalProductParamItem" :class="selectedTemp==1 ? 'active':''" @click="selectTemp(1,item.defTemp)">{{item.defTemp}}</view>
											</block>
											<block v-else-if="item.goodType=='2'">
												<view class="noSetting">暂无此分类啦</view>
											</block>
											<block v-else-if="item.goodType=='3'">
												<view class="modalProductParamItem" :class="selectedTemp==1 ? 'active':''" @click="selectTemp(1,item.defTemp)">{{item.defTemp}}</view>
												<view class="modalProductParamItem" :class="selectedTemp==2 ? 'active':''" @click="selectTemp(2,item.noTemp)">{{item.noTemp}}</view>
												<view class="modalProductParamItem" :class="selectedTemp==3 ? 'active':''" @click="selectTemp(3,item.maxTemp)">{{item.maxTemp}}</view>
											</block>
											<block v-else-if="item.goodType=='4'">
												<view class="modalProductParamItem" :class="selectedTemp==1 ? 'active':''" @click="selectTemp(1,item.defTemp)">{{item.defTemp}}</view>
												<view class="modalProductParamItem" :class="selectedTemp==2 ? 'active':''" @click="selectTemp(2,item.noTemp)">{{item.noTemp}}</view>
												<view class="modalProductParamItem" :class="selectedTemp==3 ? 'active':''" @click="selectTemp(3,item.maxTemp)">{{item.maxTemp}}</view>
											</block>
										</view>
									</view>
									<view class="modalProductParamList">
										<view class="modalProductParamTitle">糖度</view>
										<view class="modalProductParamItemBox">
											<block v-if="item.goodType=='1'">
												<view class="modalProductParamItem" :class="selectedSugar==1 ? 'active':''" @click="selectSugar(1,item.defSuger)">{{item.defSuger}}</view>
												<view class="modalProductParamItem" :class="selectedSugar==2 ? 'active':''" @click="selectSugar(2,item.lessSuger)">{{item.lessSuger}}</view>
												<view class="modalProductParamItem" :class="selectedSugar==3 ? 'active':''" @click="selectSugar(3,item.maxSuger)">{{item.maxSuger}}</view>
											</block>
											<block v-else-if="item.goodType=='2'">
												<view class="noSetting">暂无此分类啦</view>
											</block>
											<block v-else-if="item.goodType=='3'">
												<view class="modalProductParamItem" :class="selectedSugar==1 ? 'active':''" @click="selectSugar(1,item.defSuger)">{{item.defSuger}}</view>
												<view class="modalProductParamItem" :class="selectedSugar==2 ? 'active':''" @click="selectSugar(2,item.lessSuger)">{{item.lessSuger}}</view>
												<view class="modalProductParamItem" :class="selectedSugar==3 ? 'active':''" @click="selectSugar(3,item.maxSuger)">{{item.maxSuger}}</view>
											</block>
											<block v-else-if="item.goodType=='4'">
												<view class="noSetting">暂无此分类啦</view>
											</block>
										</view>
									</view>
								</scroll-view>
							</view>
						</view>
					</block>
				</view>
			</template>
		</modal>
		<!-- 服务时间提醒 -->
		<view class="serviceTip" v-if="!serviceBarClose">
			打烊啦!请在每日上午9:00~下午18点内下单
		</view>
	</view>
</template>

<script>
	import Modal from "../../components/Modal";
	import HeaderNavbar from '../../components/HeaderNavbar.vue';
	import {navHeaderHeight} from '../../assets/js/navHeaderHeight.js';
	import {_post} from '../../assets/js/req.js';
	import {url} from '../../assets/js/baseUrl.js';
	import {timer} from '../../assets/js/getTime.js'
	import {mapState} from 'vuex';
	import {qqmapsdk} from "../../assets/js/map.js";
	export default {
		name: 'menu',
		data() {
			return {
				selected: 1, //菜单默认选中项
				showModal: false, //默认支付框不显示
				goodsList: [], //商品列表
				// pageNum: 1, //
				// pageSize: 6, //
				// flag: true, //用于判断 上拉(F)还是下拉(T)
				// dataMore: true, //加载更多数据
				navHeaderHeight: null, //用于页面补充高度
				toView: "", //用于菜单导航
				serviceBarClose: true, //控制是否显示过了服务时间,默认超过
				count: 1, //默认商品数量(初次点入模态框)
				selectedSpace: [], //用于临时储存条件选出的一项数据(modal)
				selectedGood: [], //用于渲染页面的数组数据(modal)
				selectedSize: 1, //规格默认选中项(modal)
				selectedTemp: 1, //默认冰(modal)
				selectedSugar: 1, //默认糖(modal)
				price: null, //默认价钱(modal)
				showSize: "中", //默认规格中(modal)
				temp: null, //默认温度(modal)
				sugar: null, //默认糖度
				address:'无法获取当前定位', //默认地址
				showDistance:'0', // 默认距离
				goodId:null,
				allGoodsId:[],
				// catchAllGoodsId:[],
			}
		},
		computed: {
			...mapState(['cartCount','catchAllGoodsId']),
		},
		watch: {
			// catchAllGoodsId(allGoodsId){
			// 	// let that = this
			// 	// that.catchAllGoodsId = allGoodsId
			// 	console.log(allGoodsId);
			// },
			cartCount(count) {
				// 监听mapState中的变量，当数据变化（有值、值改变等），
				// this.count = count;
				// console.log(count);
				uni.setStorage({
					key: 'haveGoods',
					data: true,
					success: function() {
						// console.log('success');
					}
				});
				//这里放用户

			}
		},
		components: {
			HeaderNavbar,
			Modal
		},
		methods: {
			//手风琴切换
			// 获取当前点击scrollItem项的id
			goToView(item) {
				let that = this
				//动态绑定回页面
				that.selected = item //左边手风琴列表
				let p = "index" + (item - 1) //字符串拼接规则:例中事件初始序列是1,要对应循环序列[0]~[i],所以item减1
				// console.log(p);	
				that.toView = p //把时间绑定的值改回
				that.$forceUpdate(); //必须:强制刷新view 
				//(Vue因Js线程限制,无法实时更新view上新加数组/函数的视图,可以用this.$set()/this.$forceUpdate()刷新或绑定视图)
			},

			//获取当前定位
			getMap() {
				let that = this
				uni.getLocation({
					type: 'gcj02', //腾讯地图使用的是国家测绘局02标准
					geocode: true, //设置该参数为true可直接获取经纬度及城市信息
					success: res => {
						// console.log(res)
						// that.addrDel = res;
						//注意区分实例 reverseGeocoder获取当前定位周边信息
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success: addressRes => {
								// 获取完整地址
								let address = addressRes.result.formatted_addresses.recommend;
								// console.log(address)
								that.address=address							}
						});
						//注意区分实例 calculateDistance计算两点之间距离
						qqmapsdk.calculateDistance({
						  mode:'straight',//可选值：'driving'（驾车）、'walking'（步行 默认），'straight'（直线） 
						  from: {
						    latitude: res.latitude,
						    longitude: res.longitude
						  },
						  to: [{
						    latitude: 23.147901,
						    longitude: 113.3324,
						  }],
						  success: res => {
						    //距离
						    let distance = res.result.elements['0'].distance;
						    // console.log(distance);
								//如果大于1000m
								if(distance>1000){
									let showDistance = (distance/1000)
									// console.info(a.toFixed(1));
									that.showDistance=showDistance.toFixed(1)+'km'
								}else{
									that.showDistance=distance+'m'
								}
						  },
						})
						
					},
					fail: () => {
						uni.showToast({
							title: '获取地址失败，将导致部分功能不可用',
							icon: 'none'
						});
					}
				});
			},
			
		

			//控制底部服务时间提醒
			showServiceBar() {
				let that = this
				//把全局获取到的时间戳引入
				let timeShow = timer
				// console.log(typeof(timeShow)); //字符串类型
				let Hour = timeShow.slice(10, 13)
				// console.log(Hour);
				if (Hour > 18 && Hour < 9) {
					that.serviceBarClose = false
				} else {
					that.serviceBarClose = true
				}
				that.$forceUpdate()
			},

			//更新数量(获取子组件传回的数量,并渲染)
			updataCount() {
				this.count = data.count
			},

			//捕获点击项的商品Id
			catchId(Id) {
				let that = this
				let goodId = Id
				that.goodId=goodId
				// console.log(goodId);
				//拉起请求
				let urls = url + '/goodsList'
				_post(urls).then((res) => {
					// console.log(res); //查看返回结果
					//接取所有商品数据
					let allGoods = res.data.goodList
					//分离每项(把原数组内容分离)
					for (let goodsItem of allGoods) {
						//把分离好的每一项数据放入要显示到页面的商品数组(条件是根据我们点击项的id去找)
						for (let goods of goodsItem.goods) {
							if (goods.id == goodId) {
								that.selectedSpace.push(goods) //用新数组接住每一项数据(如果符合条件)
							}
						}
					}

					that.selectedGood = [] //清空渲染数组里的数据(防止叠加)
					// console.log(goodsItem.goods);
					that.selectedGood.push(that.selectedSpace) //把获取到的数据放到渲染的数组里
					that.selectedSpace = [] //清除通过条件获取的那个商品数据(防止叠加)
					// console.log(that.selectedGood);
					// console.log(that.selectedGood[0]);
					that.selectedSize = 1 //设置初次打开商品详情规格的默认选中项
					that.selectedTemp = 1 //设置初次打开商品详情温度的默认选中项
					that.selectedSugar = 1 //设置初次打开商品详情温度的默认选中项
					that.price = that.selectedGood[0][0].price //设置初次打开商品详情的默认价格
					that.temp = that.selectedGood[0][0].defTemp //设置初次打开商品详情的默认温度
					that.sugar = that.selectedGood[0][0].defSuger //设置初次打开商品详情的默认温度
				})
				
			},

			/*
				selectedSize: 1, //规格默认选中项(modal)
				selectedTemp: 1, //默认冰(modal)
				selectedSugar: 1, //默认糖(modal)
				price: null, //默认价钱(modal)
				showSize: "中", //默认规格中(modal)
				temp: null, //默认温度(modal)
				sugar: null, //默认糖度
			*/

			//规格选中项事件
			selectSize(item, price) {
				let that = this
				that.selectedSize = item //设置用户点击规格内容选中的状态(中\大)
				that.price = price //设置用户点击规格内容选中项的价格(中杯价格\大杯价格)
				// console.log(that.selectedSize);
				// console.log(that.price);
				let size
				if(that.selectedSize==1){
					size="中"
				}else{
					size="大"
				}
				that.$store.dispatch('saveSelectSize', size)
				that.$forceUpdate() //必须:强制刷新view 
			},

			//温度选中项事件
			selectTemp(item, temp) {
				let that = this
				that.selectedTemp = item //设置用户点击规格内容选中的状态(中\大)
				that.temp = temp //设置用户点击规格内容选中项的价格(中杯价格\大杯价格)
				that.$store.dispatch('saveSelectTemp', temp)
				// console.log(that.selectedSize);
				// console.log(that.price);
				that.$forceUpdate() //必须:强制刷新view 
			},

			//温度选中项事件
			selectSugar(item, sugar) {
				let that = this
				that.selectedSugar = item //设置用户点击规格内容选中的状态(中\大)
				that.sugar = sugar //设置用户点击规格内容选中项的价格(中杯价格\大杯价格)
				that.$store.dispatch('saveSelectSugar', sugar)
				// console.log(that.selectedSize);
				// console.log(that.price);
				that.$forceUpdate() //必须:强制刷新view 
			},

			// catchCount(count) {
			// 	console.log(count);
			// },

			// 加入购物车
			goToCart(count) {
				let that = this
				let goodId=that.goodId
				that.allGoodsId.push(goodId)
				uni.showToast({
					title: '添加成功',
					duration: 1500
				})
				// console.log(count);
				that.$store.dispatch('saveCartCount', count)
				let allGoodsId=that.allGoodsId+'/'+count
				that.$store.dispatch('saveGoodId', allGoodsId)
				setTimeout(() => {
					that.showModal = false
				}, 1500)

				// setTimeout(()=>{
				// 	this.$Router.pushTab({ path:'pages/cart/cart'})
				// },3000)

			},

			//获取初始渲染列表的商品数据
			//数据列表请求
			//调用封装好的请求
			getGoodsList() {
				// console.log(_post);
				//重定义地址(要用新变量名去接)
				let urls = url + '/goodsList'
				_post(urls).then((res) => {
					// console.log(res); //查看返回结果
					//接取所有商品数据
					let goodList = res.data.goodList
					// console.log(goodList); 
					//分离每项(把原数组内容分离)
					for (let goodsItem of goodList) {
						//把分离好的每一项数据放入要显示到页面的商品数组
						this.goodsList.push(goodsItem)
					}
					// console.log(this.goodsList);
				})

			}

		},
		created() {
			var that = this;
			//把引入的全局高度补充给页面
			that.navHeaderHeight = navHeaderHeight
			// 
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.getGoodsList();
			// console.log(this.goodsList.value);
		},
		onReady: function() {
			// this.getGoodsList();
			// console.log(a);
			// console.log(1);
		},
		onShow() {
			let that=this
			this.getMap()
			// this.getGoodsList();
			setInterval(() => {
				that.showServiceBar();
				//每3分钟刷新一次看看是否超过服务时间
			}, 1800000)
		}
	}
</script>
<style lang="scss">
	@import '@/assets/scss/mixin.scss';
	@import '@/assets/scss/config.scss';
	@import '@/assets/scss/base.scss';
	@import '@/assets/scss/modal.scss';

	.content {
		// margin-top: ;
		@include flex(center, center);
		flex-direction: column;
		background-color: #FFF;
		background-color: aliceblue;

		.headerNavbar {
			z-index: 10000;
			// box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .1);
			// text-align: center;
			// margin-top: 44rpx;
		}

		.safeArea {
			width: 100%;
			position: relative;

			.OrderMap {
				width: 100%;
				height: 120rpx;
				@include flex(center, center);
				box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, .1);
				margin-bottom: 20rpx;
				background-color: #FFF;

				//  距离最近的商户地址
				.storyAddressBox {
					width: 59%;
					padding-left: 20rpx;
					.storyTitle{
						text-overflow:ellipsis;
						white-space:nowrap;
						overflow:hidden;
						@include fontStyle($fontE,black);
					}
					.storyDistance {
						@include fontStyle($fontG);
					}

					image {
						padding-left: 10rpx;
						vertical-align: text-bottom;
						width: 40rpx;
						height: 36rpx;
					}
				}

				// 配送方式 
				.shippingBox {
					width: 39%;
					height: 80rpx;
					padding-right: 20rpx;
					text-align: center;
					@include flex(center, center);

					router-link {
						width: 40%;
						height: 100%;
						display: block;
						padding-top: 20rpx;

						.takeBySelf,
						.outSend {
							width: 100%;
							height: 50rpx;
							line-height: 46rpx;
							border: 1rpx solid $colorA;
							@include fontStyle($fontF, black) // &:hover {
							// 	background-color: #007AFF;
							// 	border: 0;
							// color:white;
							// }
						}

						.takeBySelf {
							@include border-radius(20rpx, 0, 0, 20rpx);
							background-color: $colorA;
							border: 0;
							color: white;
						}

						.outSend {
							@include border-radius(0, 20rpx, 20rpx, 0);
						}
					}

				}
			}

			.saleForFree {
				width: 100%;
				height: 60rpx;
				line-height: 50rpx;
				background-color: $colorA;
				@include fontStyle($fontE, #FFF) border: 1rpx solid #E8E8E8;
				margin-bottom: 20rpx;
				box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .1);
				text-align: center;
			}

			.newComers {
				width: 100%;
				height: 60rpx;
				padding: 10rpx auto;
				border: 1rpx solid #E8E8E8;
				box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .1);
				background-color: #FFF;
				// padding-bottom: 20rpx;
				box-sizing: content-box;
				@include border-radius(10rpx, 10rpx, 10rpx, 10rpx);
				@include fontStyle($fontF);
				@include flex(center, center);

				.newComersTitle {
					padding-left: 20rpx;
					display: inline-block;
					width: 530rpx;
				}

				.newComersNowJoin {
					padding-right: 20rpx;
					display: inline-block;
					width: 160rpx;
					color: $colorA;
				}
			}

			.menuSwiper {
				width: 100%;
				padding-top: 20rpx;

				// height:300rpx;
				.menuSwiperBox {
					height: 300rpx;

					.silde-images {
						width: 100%;
					}
				}
			}

			.MenuBox {
				background-color: #FFF;
				width: 100%;
				height: 100%;
				min-height: 730rpx;
				overflow: hidden;
				position: relative;

				@include flex(center, center);

				.MenuBoxSafeArea {
					width: 100%;
					height: 830rpx;
					@include flex(flex-start, flex-start);

					.MenuSelecter {
						margin-top: 20rpx;
						width: 20%;
						height: 900rpx;
						@include flex(center, center);
						border-right: 1px solid whitesmoke;

						.scrollHidden {
							width: 136rpx;
							height: 100%;
							overflow: hidden;
							// padding-top: 20rpx;

							.scrollBox {
								width: 156rpx;
								height: 850rpx;

								// padding-left: 20rpx;
								.scrollItem {
									width: 148rpx;
									height: 56rpx;
									line-height: 56rpx;
									text-align: center;
									font-size: 14px;
								}
							}
						}
					}

					.menuList {
						width: 80%;
						height: 850rpx;
						// min-height: 730rpx;
						overflow: hidden;

						.orderShare {
							width: 90%;
							height: 60rpx;
							padding: 20rpx auto;
							margin: 10rpx auto;
							border: 1rpx solid #E8E8E8;
							box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .1);
							background-color: #FFF;
							margin-bottom: 20rpx;
							box-sizing: content-box;
							@include border-radius(10rpx, 10rpx, 10rpx, 10rpx);
							@include fontStyle($fontF);
							@include flex(center, center);

							.orderShareTitle {
								padding-left: 20rpx;
								display: inline-block;
								width: 530rpx;
								color: $colorA;
							}

							.orderShareFriends {
								padding-right: 20rpx;
								display: inline-block;
								width: 160rpx;
								color: $colorA;
							}
						}

						.menuListScroll {
							// height: 100%;
							height: 100%;

							.menuListBox {
								width: 100%;
								padding: 0 20rpx;
								margin-bottom: 160rpx;

								.menuListBoxtitle {
									margin-top: 20rpx;
									margin-left: 20rpx;
									width: 100%;
									height: 60rpx;
									display: inline-block;
									line-height: 50rpx;
									// border: 1rpx solid $colorA;
									// text-align: center;
									// background-color: $colorA;
									@include fontStyle($fontE, $colorA);

									&::after {
										content: '';
									}
								}

								.productList {
									width: 100%;
									padding-bottom: 20rpx;

									.productItem {
										width: 100%;
										height: 170rpx;
										margin: 10rpx 0;
										@include flex(center, center);

										image {
											width: 30%;
											height: 100%;
										}

										.productAttr {
											width: 70%;
											height: 100%;

											.productName,
											.productAbstract,
											.productBuy {
												width: 100%;
												padding-left: 20rpx;
												padding-right: 20rpx;
												height: 33.3%;
											}

											.productName {
												padding-top: 20rpx;
												@include fontStyle($fontE, black);
											}

											.productAbstract {
												padding-top: 10rpx;
												@include textOverFlowHidden();
												@include fontStyle($fontF);
											}

											.productBuy {
												padding-top: 10rpx;

												@include flex(flex-start, center);

												.productPrice {
													width: 70%;
													@include fontStyle($fontD, $colorA)
												}

												.productSize {
													width: 120rpx;
													height: 50rpx;
													line-height: 40rpx;
													background-color: $colorA;
													@include border-radius(20rpx, 20rpx, 20rpx, 20rpx);
													border: 1rpx solid #E8E8E8;
													@include fontStyle($fontF, white);
													text-align: center;
													// padding-left: 20rpx;
												}
											}

										}
									}
								}
							}


						}

					}
				}
			}


		}

		.modalProductBox {
			width: 100%;
			padding: 300rpx 40rpx 140rpx;
			// text-align: center;
			position: relative;
			@include flex(center, center);
			flex-wrap: wrap;

			.modalProductImg {
				width: 100%;
				height: 300rpx;
				text-align: center;
				position: absolute;
				top: 0;
				left: 0;
				padding: 40rpx 40rpx 20rpx;

				image {
					width: 240rpx;
					height: 240rpx;
				}
			}

			.modalScrollBox {
				overflow: hidden;
				width: 100%;
				height: 70%;
				@include flex(flex-start, flex-start);
				flex-wrap: wrap;

				.modalScrollHidden {
					//margin: 0 auto;
					// border: 1rpx solid $colorA;
					width: 100%;
					height: 100%;
					overflow: hidden;
					white-space: nowrap;

					.modalScroll {
						//撑开,隐藏滚动条
						margin-left: 20rpx;
						height: 500rpx;

						.modalProductTitle {
							width: 100%;
							height: 60rpx;
							line-height: 60rpx;
							display: block;
							@include fontStyle($fontE, black);
							font-weight: bold;
						}

						.modalProductContent {
							width: 100%;
							// display:block;
							padding-bottom: 20rpx;
							@include fontStyle($fontF, #646464);
							border-bottom: 1rpx solid $colorH;
							margin-bottom: 10rpx;
						}

						.modalProductParamList {
							width: 100%;

							.modalProductParamTitle {
								width: 100%;
								// display:block;
								margin-top: 30rpx;
								padding-bottom: 20rpx;
								@include fontStyle($fontE, $colorD)
							}

							.modalProductParamItemBox {
								width: 100%;
								@include flex(flex-start, center);
								flex-wrap: wrap;

								.modalProductParamItem {
									margin-bottom: 10rpx;
									margin-right: 10rpx;
									padding: 16rpx 30rpx;
									border: 1px solid $colorA;
									color: #000;
									@include border-radius(10rpx, 10rpx, 10rpx, 10rpx);

								}

								.active {
									color: #FFF;
									background-color: $colorA;
									border: 1px solid #FFF;
								}

								.noSetting {
									margin: 0 auto 20rpx;
									width: 90%;
									text-align: center;
									padding: 16rpx 30rpx;
									border: 1px solid #E8E8E8;
									color: #000;
									@include border-radius(10rpx, 10rpx, 10rpx, 10rpx);
								}

							}
						}
					}

				}



			}

		}

		.serviceTip {
			width: 100%;
			height: 50rpx;
			line-height: 40rpx;
			background-color: $colorA;
			color: #FFF;
			border: 1rpx solid #E8E8E8;
			box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .1);
			text-align: center;
			position: fixed;
			left: 0;
			bottom: 0;
		}
	}
</style>
